<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import {getYearEngVolumeDatas} from "@/api/system/enginfo";


export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      chart: null,
      years:null,
      engNums:null,
      volumeNums:null,
    }
  },
  async created() {
    await this.getData()
    await this.initChart()
  },

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var option = {
        title: {
          text: '工程案卷年份统计',
          subtext: '未填写年份的数据不参与统计',
          textStyle: {
            fontWeight: 400,
            fontSize: 18,

          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['工程数', '案卷数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            inside: false,
            interval: 0,
            textStyle: {
              fontWeight: 400,
              fontSize: 15,
            },
            margin: 15
          },
        },
        yAxis: {
          type: 'category',
          data: this.years,
          axisLabel: {
            textStyle: {
              fontWeight: 400,
              fontSize: 15,

            },
            formatter: '{value}',
            margin: 15
          }

        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},

            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        series: [
          {
            name: '工程数',
            type: 'bar',
            data: this.engNums,
            itemStyle: {
              normal: {
                color: {
                  colorStops: [
                    { offset: 0, color: '#0173ff' },
                    { offset: 1, color: '#03fef1' },
                  ],
                  /** 这四个分别代表 左、上、右、下 四个方向
                   * 就像以下这种情况：就是说要往左上渲染，就是以左上为终点
                   * **/
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  type: 'linear',
                  global: false,
                },
              },
            },
          },
          {
            name: '案卷数',
            type: 'bar',
            data: this.volumeNums,
            itemStyle: {
              normal: {
                color: {
                  colorStops: [
                    { offset: 0, color: '#11d56d' },
                    { offset: 1, color: '#83bff6' },
                  ],
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  type: 'linear',
                  global: false,
                },
              },
            },

          }
        ]
      };
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(option)
    },
    async getData(){
      this.loading=true
      var year = new Date().getFullYear();
      await getYearEngVolumeDatas(year).then(res=>{
        console.log(res)
        this.engNums = res.engNums;
        this.volumeNums = res.volumeNums;
        this.years = res.years;
      })
      this.loading=false
    },

  }
}
</script>
